import React, {useEffect, useState} from "react";
import { useTranslation } from "react-i18next";
import { Table, Modal, Pagination } from "antd";

export const ChangeRecords = React.forwardRef(
  ({ visible, handleCloseChangeRecords }, ref) => {
    const { t } = useTranslation();
    const [locale, setLocale] = useState("");

    useEffect(() => {
      if (sessionStorage.getItem("langType")) {
        setLocale(sessionStorage.getItem("langType") || "en-US"); // 设置默认语言为浏览器的语言
      } else {
        setLocale("en-US"); // 如果无法获取到浏览器语言则默认为英文
      }
      return () => {}; // 清除effects时不进行任何操作
    }, []);
  
    const columns = [
      {
        title: t("dappIndexRegulation.number"),
        dataIndex: "a",
        key: "a",
        align: "center",
      },
      {
        title: t("dappIndexRegulation.dateAndTime"),
        dataIndex: "b",
        key: "b",
        align: "center",
      },
      {
        title: t("dappIndexRegulation.controlToken"),
        dataIndex: "c",
        key: "c",
        align: "center",
      },
      {
        title: t("dappIndexRegulation.regulatoryContent"),
        dataIndex: "d",
        key: "d",
        align: "center",
      },
      {
        title: t("dappIndexRegulation.operationType"),
        dataIndex: "e",
        key: "e",
        align: "center",
      },

      {
        title: t("dappIndexRegulation.executionStatus"),
        dataIndex: "f",
        key: "f",
        align: "center",
        render: (text, record) => (
          <div className={record.f == 0 ? "yellow-text" : "green-text"}>
            {record.f == 0 ? t('dappIndexRegulation.regulating'): t('dappIndexRegulation.successful')}
          </div>
        ),
      },

      {
        title: t("dappIndexRegulation.regulatoryContent"),
        dataIndex: "g",
        key: "g",
        align: "center",
        render: (text, record) => (
          <div className={record.g > 0 ? "green-text" : "red-text"}>
            {record.g > 0 ? `+${text}%` : `${text}%`}
          </div>
        ),
      },
    ];
    const dataSource = [
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: 9,
      },
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: 9,
      },
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: -5,
      },
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: 9,
      },
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: 9,
      },
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: -2,
      },
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: 9,
      },
      {
        a: "1",
        b: "2021-09-12 12:00:00",
        c: "BTC",
        d: "权重",
        e: "增加",
        f: 1,
        g: 9,
      },
    ];
    return (
      <Modal
        width={locale == 'en-US'? 800:668}
        footer={null}
        open={visible}
        title={t("dappIndexRegulation.records")}
        className="index-regulation-modal index-regulation-change-records-modal"
        onCancel={handleCloseChangeRecords}
      >
        <div className="table-box">
          <Table
            size="small"
            boedered={false}
            columns={columns}
            dataSource={dataSource}
            pagination={false}
          ></Table>
          <div className="pagination-box">
            <div className="total-text">20</div>
            <Pagination total={50} size="small" />;
          </div>
        </div>
      </Modal>
    );
  }
);
